<template>
  <el-scrollbar height="auto">
  <div class="w">
    <div style="overflow: hidden">
      <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
      <div style="float: left;margin-left: 10px">
        <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">导演信息</span>
      </div>
    </div>
    <el-card class="content">

          <div class="left">
            <el-image :src="BASE_URL + directorData.poster"
                      style="width: 150px;height: auto;"
                      alt="Film poster"/>
          </div>

          <div class="right">
            <div style="margin-left: 20px;">
              <p style="line-height: 1.5;text-indent: 2em;">{{ directorData.intro }}</p>
            </div>
          </div>

    </el-card>

    <div style="overflow: hidden;margin-top: 20px;">
      <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
      <div style="float: left;margin-left: 10px">
        <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">导演作品</span>
      </div>
    </div>

    <div style="text-align: center;margin-top: 10px">
      <el-row :gutter="10">
        <el-col :span="4" v-for="item in tableData">
          <div style="margin-top: 20px">
            <div style="position: relative">
              <el-image :src="BASE_URL + item.poster"
                        style="width: 80%;height: auto;margin: 0 auto;position: relative;z-index: 1"
                        alt="Film poster"/>
              <div style="position: absolute;bottom: 0;left: 50%; transform: translateX(-50%);z-index: 2;
                        width: 80%;height: 100%;
                       background: linear-gradient(360deg, #0f1827 8%, rgba(15, 24, 39, 0) 70%);   "
                   @click="watchFilmById(item.id)">
                <p style="position: absolute;bottom: 0;left: 50%;width: 80%;
                              transform: translateX(-50%);z-index: 3;color: #FFFFFF;
                              font-size: 16px;font-weight: bold;">{{ item.filmName }} </p>
              </div>
            </div>
            <el-button @click="watchFilmById(item.id)"
                       style="width: 80%;border-radius: 0 ; border: #671523;
                                background-color: #671523;color: #FFFFFF">观 看
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
  </el-scrollbar>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

let directorId = new URLSearchParams(window.location.search).get('directorId');
const directorData = ref([]);
const searchDirector = () => {
  axios.get(BASE_URL + '/v1/director/select?id=' + directorId)
      .then((response) => {
        if (response.data.code === 2000) {
          directorData.value = response.data.data[0];
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
};
onMounted(() => {
  searchDirector();
})
const watchFilmById = (filmId) => {
  router.push('/details?filmId=' + filmId)
}
const tableData = ref([]);
const searchFilmByDirector = () => {
  axios.get(BASE_URL + '/v1/film/select?directorId=' + directorId)
      .then((response) => {
        if (response.data.code === 2000) {
          tableData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
}
onMounted(() => {
  searchFilmByDirector();
})
</script>

<style scoped>
.content {
  background-color: #0f1827;
  border: #0f1827;
  overflow: hidden;
  margin-top: 20px;
}
.left {
  float: left;
  width: 150px;
}
.right {
  float: left;
  width: 1050px;
  padding: 20px;
  box-sizing: border-box;
  p {
    color: #FFFFFF;
  }
}
</style>
<style>
.el-card__body {
  padding: 0;
}
</style>